<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="friends"></ul>
    <script>
        //JSON 数组 
        //数据
        const friends = [
            { name: "xx", age: 20, email: "EMAIL" },
            { name: "John", age: 30, email: "john@example.com" },
        ]
        // DOM 编程
        const ul = document.getElementById("friends");
        // 如果不需要index，for of 更语义化
        // for(let friend of friends){
        //     const friend = friends[i];
        //     ul.innerHTML += `
        //     <li>
        //         姓名：${friend.name} ---
        //         年龄：${friend.age} ---
        //         邮箱：${friend.email}
        //     </li>
        //     `
        // }
        // es6 forEach 升级版
        // forEach 会自动遍历数组，把数组的每一项都传入回调函数中
        // 迭代
        ul.innerHTML = friends.map(friend =>
             `
            <li>
                姓名：${friend.name} ---
                年龄：${friend.age} ---
                邮箱：${friend.email}
            </li>
            `
        ).join("")
    </script>
</body>

</html>